<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="component/heard :: head"></head>
<script src="https://code.highcharts.com/highcharts.js"></script>
<!--    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/modules/export-data.js"></script>
    <script src="https://code.highcharts.com/modules/accessibility.js"></script>-->
<script src="http://cdn.highcharts.com.cn/highcharts/9.1.2/themes/dark-unica.js"></script>
<body>
<nav th:include="component/nav :: nav"></nav>

<div class="container-fluid bg-dark">

    <div class="row">
        <div class="col">
            <figure class="highcharts-figure">
                <div id="container"></div>
            </figure>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <figure class="highcharts-figure">
                <div id="container2"></div>
            </figure>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <figure class="highcharts-figure">
                <div id="container4"></div>
            </figure>
        </div>
        <div class="col">
            <figure class="highcharts-figure">
                <div id="container5"></div>
            </figure>
        </div>

    </div>
</div>

<script>
    $.ajax({
        type: "get",
        url: "/sync/getStatistics?type=all",
        success: function (res) {
            Highcharts.chart('container', {
                chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false,
                    type: 'pie'
                },
                title: {
                    text: '同步Flash数量 (总)'
                },
                tooltip: {
                    formatter: function() {
                        return '<b>'+ this.point.name +'</b>: '+ Highcharts.numberFormat(this.percentage, 1) +'% ('+
                            Highcharts.numberFormat(this.y, 0, ',') +' )';
                    }
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: false
                        },
                        showInLegend: true
                    }
                },
                series: [{
                    name: '',
                    colorByPoint: true,
                    data: res.data/*[{
                name: 'Chrome',
                y: 61.41,
                sliced: true,
                selected: true
            }, {
                name: 'Internet Explorer',
                y: 11.84
            }, {
                name: 'Firefox',
                y: 10.85
            }, {
                name: 'Edge',
                y: 4.67
            }, {
                name: 'Safari',
                y: 4.18
            }, {
                name: 'Other',
                y: 7.05
            }]*/
                }]
            });
        }
    });

    $.ajax({
        type: "get",
        url: "/sync/sevenDayStatistics?type=success",
        success: function (data) {
            Highcharts.chart('container4', {
                chart: {
                    type: 'column'
                },
                title: {
                    text: '7天同步Flash 成功'
                },
                subtitle: {
                    text: ''
                },
                xAxis: {
                    categories: data.categories,
                    crosshair: true
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: '数量'
                    }
                },

                plotOptions: {
                    column: {
                        borderWidth: 0
                    }
                },
                series: data.cdates
            });
        }
    });

    $.ajax({
        type: "get",
        url: "/sync/sevenDayStatistics?type=error",
        success: function (data) {
            Highcharts.chart('container5', {
                chart: {
                    type: 'column'
                },
                title: {
                    text: '7天同步Flash 失败'
                },
                subtitle: {
                    text: ''
                },
                xAxis: {
                    categories: data.categories,
                    crosshair: true
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: '数量'
                    }
                },

                plotOptions: {
                    column: {
                        borderWidth: 0
                    }
                },
                series: data.cdates
            });
        }
    });
    $.ajax({
        type: "get",
        url: "/sync/todayStatistics",
        success: function (data) {
             Highcharts.chart('container2', {
                chart: {
                    type: 'bar'
                },
                title: {
                    text: '今日同步统计'
                },
                subtitle: {
                    text: ''
                },
                xAxis: {
                    categories: data.categories,
                    title: {
                        text: null
                    }
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: '同步总量',
                        align: 'high'
                    },
                    labels: {
                        overflow: 'justify'
                    }
                },
                tooltip: {
                    valueSuffix: ' 条'
                },
                plotOptions: {
                    bar: {
                        dataLabels: {
                            enabled: true,
                            allowOverlap: true // 允许数据标签重叠
                        }
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'top',
                    x: -40,
                    y: 100,
                    floating: true,
                    borderWidth: 1,
                    backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
                    shadow: true
                },
                series: data.cdates
            });
        }
    });

</script>
</body>
</html>